<template>
  <div class="page-content">
    <div class="text-right">
      <el-button size="small" class="mb-2 d-print-none" @click="printPage">
        <i class="fa fa-print"></i>
        打印
      </el-button>
    </div>
    <div class="p-5 border-noprint">
      <h3 style="margin: 50px 0; font-size: 25px; text-align: center">
        {{ relatedData.customer_name || '-' }}担保申请书
      </h3>
      <p>{{ relatedData.service_name }}</p>
      <p class="text-indent">
        <span class="text-decoration">{{ relatedData.item_project_des | dotFilter }}</span>
        <span>，主营业务：</span>
        <span class="text-decoration">{{ relatedData.business_scope | dotFilter }}</span>
        <span>。现因</span>
        <span class="text-decoration">{{ relatedData.funds_use_dir | dotFilter }}</span>
        <span>。因借款时资质不足，特向贵公司申请担保贷款</span>
        <span class="text-decoration">{{ relatedData.apply_funds || '' }}</span>
        <span>万元，借款期限：</span>
        <span class="text-decoration">{{ loanMonths || '' }}</span>
        <span>个月。还款计划：</span>
        <span class="text-decoration">{{ relatedData.item_return_plan | dotFilter }}</span>
        <span>，反担保措施为：</span>
        <span class="text-decoration">{{ relatedData.item_counter_guarantee | dotFilter }}</span>
        <span>。</span>
      </p>
      <p class="text-indent">
        我公司保证履行与借款银行、担保公司签订的各类合同/协议，按时偿还借款本息，保证所填写的内容和所提交的申请材料真实无误。如有不实，我公司将承担由此引起的一切经济和法律责任，恳请贵公司予以支持为谢！
      </p>
      <p class="text-right" style="margin: 50px 0">
        <span>{{ relatedData.customer_name || '-' }}（公章）</span>
      </p>
      <p class="text-right" style="margin: 50px 80px 50px 0">
        <span>法定代表人签名：</span>
      </p>
      <p class="text-right" style="margin: 50px 0">
        <span class="text-decoration">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <span>年</span>
        <span class="text-decoration">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>月</span>
        <span class="text-decoration">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>日</span>
      </p>
    </div>
  </div>
</template>

<script>
import { printA4 } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    relatedData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    loanMonths() {
      const loanYears = +this.relatedData.load_years || 0
      return loanYears * 12
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    printPage() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        body {font-family: SimSun;}
        .text-indent{text-indent: 2rem;}
        .text-decoration{text-decoration: underline;}
        .page-content {max-width: 794px;margin: 0 auto;font-size: 1.2rem;line-height: 2;}
      `
      )
    },
  },
  filters: {
    dotFilter: v =>
      `${v || ''}`
        .trim()
        .replace(/\r\n$/, '')
        .replace(/\n$/, '')
        .replace(/[。，.,]$/, ''),
  },
}
</script>
<style lang="scss" scoped>
.page-content {
  max-width: 794px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
}
p {
  margin: 0;
}
.text-indent {
  text-indent: 2.4rem;
}
.text-decoration {
  text-decoration: underline;
}
.border-noprint {
  border: 1px solid $border-color;
}
</style>
